<script setup lang="ts">
import { ElMessage } from "element-plus";

interface FormData {
  account: string;
  password: string;
}

const formData: FormData = {
  account: "",
  password: "",
};

const formItemList: MyComment.FormItemProps<FormData>[] = [
  {
    prop: "account",
    contentProps: {
      maxlength: 30,
      placeholder: "请输入账号",
    } as MyComment.FormItemContentProps["input"],
    contentExtends: {
      prefix: "user",
    } as MyComment.FormItemContentExtends["input"],
  },
  {
    prop: "password",
    contentProps: {
      maxlength: 30,
      placeholder: "请输入密码",
      type: "password",
      showPassword: true,
    } as MyComment.FormItemContentProps["input"],
    contentExtends: {
      prefix: "lock",
    } as MyComment.FormItemContentExtends["input"],
  },
];

const formRules: MyComment.FormRules<FormData> = {
  account: { required: true, trigger: "blur", message: "请输入账号" },
  password: { required: true, trigger: "blur", message: "请输入密码" },
};

const router = useRouter();
const myForm = ref<MyComment.FormInstance<FormData>>();

const login = async () => {
  const validateResult = await myForm.value?.validate();
  if (validateResult) {
    const data = myForm.value?.getData();
    if (data) {
      const res = await MyService.account.login(data);
      if (res.code === 200) {
        MyModule.storage.setItem("token", res.data);
        router.push({
          name: "home",
        });
      } else {
        ElMessage.error({ message: res.msg });
      }
    }
  }
};

function nowRegister() {
  router.push({
    name: "register",
  });
}

function handleForget() {
  router.push({
    name: "forgetPassword",
  });
}

onMounted(() => {});
</script>

<template>
  <div class="flex full page">
    <div class="flex-col box">
      <div class="title1">登录到</div>
      <div class="title2">互联互通DP平台</div>
      <MyForm
        ref="myForm"
        :form-data="formData"
        :form-item-list="formItemList"
        :form-rules="formRules"
        label-width="0px"
        size="large"
      ></MyForm>
      <div class="forget-password">
        <span @click="handleForget">忘记密码 ?</span>
      </div>
      <ElButton type="primary" size="large" class="button" @click="login"
        >登录</ElButton
      >
      <div class="no-account">
        没有账号吗 ?<span class="now-register" @click="nowRegister"
          >马上注册</span
        >
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  position: relative;
  background: url("@/assets/images/body_bg.png") no-repeat 100% 100%;
  justify-content: flex-end;
  align-items: center;
}

.box {
  margin-right: 380px;
  width: 530px;
  height: 676px;
  padding-left: 65px;
  padding-right: 65px;
  border-radius: 8px;
  background-color: #ffffff;
}

.title1 {
  margin-top: 90px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 44px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.title2 {
  margin-top: 8px;
  margin-bottom: 90px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 44px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.button {
  margin-top: 24px;
}
.forget-password {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052d9;
  line-height: 22px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}
.forget-password span {
  cursor: pointer;
}
.no-account {
  margin-top: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.now-register {
  margin-left: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052d9;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
</style>
